<template>
  <div>
    <div class="NewHome">
      <!-- 编辑推荐页 -->
      <div class="title">
        <span>编辑推荐</span>
      </div>
      <!-- 图片文字 -->
      <div class="edit_box">
        <div class="edit_item" v-for="(item, index) in edit" :key="index">
          <img :src="item.picUrl" alt="">
          <div>{{ item.name }}</div>
          <span class="u-earp">{{ item.playCount }}万</span>
        </div>
      </div>

      <!-- 最新音乐 -->
      <div class="title">
        <span>最新音乐</span>
      </div>
      <div class="newset_box" v-for="(item, index) in newset" :key="index">
        <div class="newset_item">
          <!-- 左侧歌曲名&歌手 -->
          <div>
            <div class="song_name">{{ item.name }}</div>
            <div class="songs_auth">{{ item.song.artists[0].name }} -- {{ item.song.album.name }}</div>
          </div>
          <!-- 右侧播放按钮 -->
          <div @click="clickPlay(item)">
            <div v-show="item.isPlay" class="icon"></div>
            <img v-show="!item.isPlay" src="../assets/autoplay.gif" alt="">
          </div>
        </div>
      </div>
    </div>
    <audio ref="audio"></audio>
  </div>
</template>
<script>


export default {
  name: 'NewHome',
  // 页面初始数据
  data() {
    return {
      // 编辑推荐的数据
      edit: [],
      newset: [],
      songid: "",
    }
  },
  // 页面逻辑(方法)
  methods: {
    // 推荐编辑推荐菜单数据
    songs() {
      // 通过axios 向后台接口拿数据
      this.axios({
        method: 'GET',
        url: "/personalized"
      }).then((result) => {
        // console.log(result.data);
        // console.log(result.data.result);
        // 处理数据
        this.edit = result.data.result.slice(0, 6);
        // console.log(this.edit);
      })
    },
    // 获取最新音乐数据
    newsong() {
      // 通过axios 向后台接口拿数据
      this.axios({
        method: 'GET',
        url: "/personalized/newsong"
      }).then((result) => {
        // console.log(result.data.result);
        result.data.result.map((item) => {
          item.isPlay = true;
          return item;
        })
        // 处理数据
        this.newset = result.data.result;
        console.log(this.newset);
      })
    },
    // 播放歌曲
    clickPlay(e) {
      // console.log(e);
      // 将所有的播放状态统一设置为暂停
      this.newset.map((item) => {
        item.isPlay = true;
        return item;
      })
      e.isPlay = !e.isPlay;
      console.log(e);

      // 获取页面上的audio标签
      var audio = this.$refs.audio

      // 判断是否点击相同的id
      if (this.songid == e.id) {
        // 控制音乐的状态
        if (audio.paused) {
          // 如果音乐是暂停的就继续播放
          audio.play()
          return;
        }
        // console.log("当前音乐正在播放");
        // 调用暂停的方法
        audio.pause();
        // 修改状态
        e.isPlay = !e.isPlay;
        return;
      }
      //  将播放id赋值回去
      this.songid = e.id
       //  将音乐地址赋值回去给audio
      audio.src = `https://music.163.com/song/media/outer/url?id=${this.songid}.mp3`
      // 播放
      audio.play();
    }
  },
  // 生命周期
  created() {
    this.songs(),
    this.newsong()
  }

}
</script>
<style lang="less" scoped>
.NewHome {
  border-top: 1px solid #e8e8e8;

  .title {
    margin: 14px 0;

    span {
      border-left: 3px solid #d43c33;
      padding-left: 8px;
      font-size: 16px;
    }
  }

  .edit_box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .edit_item {
      width: calc(99% / 3);
      height: 185px;
      margin-bottom: 12px;
      position: relative;

      img {
        display: block;
        width: 100%;
        height: 130px;
      }

      >div {
        width: 100%;
        font-size: 14px;
        padding: 6px 2px 0 6px;
        box-sizing: border-box;
        // 多行文本溢出隐藏
        // 用来控制块级元素显示文本的行数 2
        -webkit-line-clamp: 2;
        // 将对象作为贪心盒子模型显示
        display: -webkit-box;
        // 设置或者检索伸缩盒对象的子元素的排列方式
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; // 省略号
      }

      >span {
        display: block;
        height: 18px;
        background-image: url( 
);
        position: absolute;
        right: 5px;
        top: 2px;
        z-index: 3;
        padding-left: 13px;
        color: #fff;
        font-size: 13px;
        background-position: 0;
        background-repeat: no-repeat;
        background-size: 14px 12px;
        text-shadow: 1px 0 0 rgb(0 0 0 / 15%);
      }
    }
  }

  .newset_box {
    padding: 0 5px;
    padding-bottom: 10px;

    .newset_item {
      display: flex;
      height: 56px;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #e8e8e8;

      >div:nth-child(1) {
        width: 90%;

        >div {
          // 多行文本溢出隐藏
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis; // 省略号
        }

        .song_name {
          font-size: 16px;
          color: #333;
        }

        .songs_auth {
          color: #888;
          font-size: 12px;
          margin-top: 4px;
        }
      }

      >div:nth-child(2) {
        .icon {
          width: 32px;
          height: 32px;
          background-image: url('../assets/index_icon_2x.png');
          background-repeat: no-repeat;
          background-position: -18px 0;
          background-size: 166px 97px;
        }

        img{
          width: 22px;
          height: 22px;
          display: block;
        }
      }
    }
  }
}
</style>